import Link from "next/link";
import { BookOpen, User, History, Bookmark } from 'lucide-react';
import { fetchData } from "@/common/fetch";
import PinyinText from "@/components/PinyinText";
export default async function PoemDetail({ params }: { params: Promise<{ id: string }> }) {
  const {id} = await params;

  const reqData = await fetchData(`/api/poem/find`, { method: "POST",data: {id} });
  console.log(reqData);
  const poem = reqData.data? {
    ...reqData.data,
    author: reqData.data?.poet?.name,
    dynasty:  reqData.data?.poet?.dynasty,
    content: reqData.data?.content?.split(/(?<=[。！？])/) || [],
    translation: reqData.data?.translate,
    intro: reqData.data?.notes,
    recommendations: []
  }:{}
 
  return <div className="space-y-8 mt-8 p-5 md:p-0">
  <div className="bg-slate-800/50 rounded-xl p-8 border border-slate-700">
    <header className="space-y-4">
      <h1 className="text-3xl font-bold">
        <PinyinText text={poem.title} fontSize={1.875} />
      </h1>
      <div className="flex items-center space-x-4 text-slate-400">
        <Link href={`/poet/${poem.poet.id}`} className="flex items-center hover:text-emerald-400">
          <User className="h-4 w-4 mr-1" />
          <PinyinText text={poem.author} />
        </Link>
        <span className="flex items-center">
          <History className="h-4 w-4 mr-1" />
          <PinyinText text={poem.dynasty} />
        </span>
      </div>
    </header>

    <div className="mt-8 space-y-8">
      <div className="space-y-4">
        <h2 className="text-xl font-semibold flex items-center gap-2">
          <BookOpen className="h-5 w-5 text-emerald-500" />
          <PinyinText text="原文" />
        </h2>
        <div className="space-y-4 text-lg leading-relaxed">
          {poem.content.map((line: string, index: number) => (
            <span key={index} className="text-slate-200 block">
              <PinyinText text={line} />
            </span>
          ))}
        </div>
      </div>

      <div className="space-y-4">
        <h2 className="text-xl font-semibold">
        <PinyinText text="译文"/>
        </h2>
        <span className="text-slate-300 leading-relaxed block">
        <PinyinText text={poem.translation} />
        </span>
      </div>

      <div className="space-y-4">
        <h2 className="text-xl font-semibold">
        <PinyinText text="简介"/></h2>
        <span className="text-slate-300 leading-relaxed block">
        <PinyinText text={poem.intro} />
        </span>
      </div>
    </div>
  </div>

  {poem.recommendations && poem.recommendations.length>0?
    <div className="space-y-4">
    <h2 className="text-xl font-semibold flex items-center gap-2">
      <Bookmark className="h-5 w-5 text-emerald-500" />
      推荐诗作
    </h2>
    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
      {poem.recommendations.map((rec:{title: string,id:number,author: string}) => (
        <Link
          key={rec.id}
          href={`/poems/${rec.id}`}
          className="p-4 rounded-lg bg-slate-800/30 border border-slate-700 hover:border-emerald-500/50 transition-all"
        >
          <h4 className="text-lg hover:text-emerald-400">{rec.title}</h4>
          <p className="text-sm text-slate-400">{rec.author}</p>
        </Link>
      ))}
    </div>
  </div>:null
  }
</div>
}
